<template>
    <div class="drslist" :style="`width:${props.width};height:${props.height};`">
        <div class="drsheard">
            <div v-for="item,index in props.colobj" :style="`${item.width?('width: '+item.width+';'):'flex:1;'}${item.minwidth?('min-width: '+item.minwidth+'px;'):''}`" :key="'col'+index">
                {{item.colname}}
            </div>

        </div>
        <div class="drsdata">
            <div v-if="_list.length>0" class="drscontent">
                <div class="drsdetail" v-for="item,index in _list" :key="`drs_${index}`">
                    <div v-for="colitem,colindex in props.colobj" :style="`${colitem.width?('width: '+colitem.width+';'):'flex:1;'}${colitem.minwidth?('min-width: '+colitem.minwidth+'px;'):''}`" :key="'data'+colindex">
                        <span v-if="colitem.dataindex!='status'">{{item[colitem.dataindex]}}</span>
                        <div v-else :class="{
                                    complete:item.status==='已完成',
                                    running:item.status==='进行中',
                                    unstart:item.status==='未开始'
                                }">{{item.status}}

                            <span v-if="item.status==='已完成' && item.ct" :class="{
                                            warning:(item.ct/item.all <=0.6)
                                        }">{{item.ct}}</span>
                            <span v-if="item.all">/{{item.all}}</span>

                        </div>
                    </div>

                </div>
            </div>
            <div v-else class="nobs">暂无数据</div>
        </div>

    </div>

</template>

<script setup>  
const props = defineProps({
    /**宽度 */
    width: {
        type: [String],
        default: '100%'
    },
    /**高度 */
    height: {
        type: [String],
        default: '100%'
    },
    /**列配置 */
    colobj: {
        type: [Array],
        default: [
            {
                colname: '时间',
                dataindex: 'time',
                width: '15%',
                minwidth: 85
            },
            {
                colname: '任务名称',
                dataindex: 'name',
                width: '35%',
                minwidth: 160
            },
            {
                colname: '任务类型',
                dataindex: 'type',
                minwidth: 85
            },
            {
                colname: '任务状态',
                dataindex: 'status',
                width: '15%',
                minwidth: 110
            }
        ]
    },
    /**数据列表 */
    modelValue: {
        type: [Array],
        default: [
            {
                "time": '08:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "已完成",
                ct: 9,
                all: 10
            },
            {
                "time": '09:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "已完成",
                ct: 6,
                all: 10
            },
            {
                "time": '10:00',
                "name": "亚运后台指挥组签到",
                "type": "巡检",
                "status": "进行中"
            },
            {
                "time": '11:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '12:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '13:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '14:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '15:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '16:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '17:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '18:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '19:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '20:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '21:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '22:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
            ,
            {
                "time": '23:00',
                "name": "亚运后台指挥组签到",
                "type": "签到",
                "status": "未开始",
            }
        ]
    },
})
let _drscontentmoveh = ref(0)
const emit = defineEmits(['update:modelValue']);
const _list = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emit('update:modelValue', val)
    }
});
onMounted(() => {
    console.log(`11111`);
    nextTick(() => {
        let drscontentparent = document.querySelector('.drsdata')
        let drscontent = document.querySelector('.drscontent')
        if (drscontent && drscontentparent) {
            if (drscontent.getBoundingClientRect().height > drscontentparent.getBoundingClientRect().height)
                _drscontentmoveh.value = (drscontent.getBoundingClientRect().height - drscontentparent.getBoundingClientRect().height) + 20
        }
    })
})
</script>
<style lang='scss' scope>
.warning {
    color: #f0b500 !important;
}
.drslist {
    //padding: 0 5px 5px 5px;
    .drsheard,
    .drsdetail {
        display: flex;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #98b6db;
        line-height: 22px;
        & > div {
            text-align: center;
            // &:nth-child(1) {
            //     width: 15%;
            //     min-width: 85px;
            // }
            // &:nth-child(2) {
            //     width: 35%;
            //     min-width: 160px;
            // }
            // &:nth-child(3) {
            //     flex: 1;
            //     min-width: 85px;
            // }
            &:last-child {
                & > div {
                    padding-left: 10px;
                    & > span {
                        &:nth-child(2) {
                            font-size: 12px;
                            color: #98b6db;
                        }
                    }
                }
                text-align: unset;
                display: flex;
            }
        }
    }
    .drsdata {
        height: calc(100% - 30px);
        overflow: hidden;

        scroll-behavior: smooth;
        .drscontent {
            transform: translateY(calc(v-bind(_drscontentmoveh) * -1px));
            animation: 12s drsgd ease-in-out infinite;
            @keyframes drsgd {
                0% {
                    transform: translateY(0px);
                }
                100% {
                    transform: translateY(
                        calc(v-bind(_drscontentmoveh) * -1px)
                    );
                }
            }
            .drsdetail {
                align-items: center;
                height: 40px;
                background: rgba(0, 112, 255, 0.1);
                margin-top: 16px;
                .complete {
                    color: #66e1df;
                }
                .running {
                    color: #f0b500;
                }
                .unstart {
                    color: #d81c1c;
                }
            }
        }
    }
}
.nobs {
    // margin-left: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bolder;
}
</style>